import React, { Component } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import PureRenderMixin from 'react-addons-pure-render-mixin';
import * as loginAction from '../../redux/actions/'
import './login.scss'
import { Redirect } from 'react-router-dom';

class LoginPage extends Component {
  constructor(props) {
    super(props);
    this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
    this.state = {
      name: '',
      loginStatus: false
    }
  }

  postLogin = () => {
    this.props.loginActions.loginAction({
      name: this.state.name
    })
    setTimeout(() => {
      this.setState({
        loginStatus: true
      })
    }, 1000);
  }

  inputChange = (e) => {
    this.setState({
      name: e.target.value
    })
  }
  
  render() {
    if(this.state.loginStatus) return <Redirect to={{pathname: '/user'}} />
    return (
      <div className="login">
        <h3>LoginPage</h3>
        <input className="name" onChange={this.inputChange}/>
        <button className="login-btn" onClick={this.postLogin}>登录</button>
      </div>
    )
  }
}

const mapStateProps = (state) => {
  return {
    loginInfo: state.login
  }
}

const mapActionProps = (dispatch) => {
  return {
    loginActions: bindActionCreators(loginAction, dispatch)
  }
}

export default connect(
  mapStateProps,
  mapActionProps
)(LoginPage)
